<template>
  <x-layout bg-color="#f7f8f3">
    <template #scroll>
      <div class="flex gap-20rpx w-100% p-20rpx flex-wrap">
        <div
          v-for="item in list"
          class="item-box"
          :key="item.name"
          @click="openPage(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </template>
  </x-layout>
</template>

<script setup>
import { useRouter } from '@/hooks'

const router = useRouter()

const list = [
  {
    name: '今日运势',
    url: '/pages/horoscope/index'
  },
  {
    name: '今日热榜',
    url: '/pages/hotList/index'
  },
  {
    name: '每天60s',
    url: '/pages/news/index'
  },
  // { 接口无了
  //   name: '豆瓣排行',
  //   url: '/pages/movies/MovieRanking/index'
  // },
  {
    name: '小六壬·活数起课法',
    url: '/pages/fortuneTelling/LiveCountClass'
  },
  {
    name: '50根签法',
    url: '/pages/fortuneTelling/FiftySign/index'
  },
  {
    name: '链接拼接',
    url: '/pages/linkSplice/index'
  },
  {
    name: '生辰八字',
    url: '/pages/birthdates/index'
  },
  {
    name: '健身打卡',
    url: '/pages/FitnessCheckIn/index'
  }
]

const openPage = (item) => {
  if (!item.url) return
  router.push(item.url)
}

</script>

<style lang="scss" scoped>
.item-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48%;
  height: 200rpx;
  font-size: 28rpx;
  font-weight: 700;
  border-radius: 60rpx;
  color: #030303;
  background-color: #ffffff;
  flex-direction: column;
}
</style>
